<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>咪咕音乐白金会员视频彩铃版G</title>
    <!--  <link rel="icon" href="">-->
    <link rel="stylesheet" href="./css/index.css" />
    <script type="text/javascript" src="./js/vue.js"></script>
    <script src="https://hz.migu.cn/order/pub-ui/js/and/migus.js"></script>
    <script src="https://hz.migu.cn/order/pub-ui/js/and/openMusicSDK.js"></script>
  </head>
  <body>
    <div id="app" class="container">
      <div class="header">
        <img src="./img/header.png" class="header-img" alt="" />
        <div class="video-position">
          <div class="video-box" v-if="videoList.length > 0" id="video-box">
            <div class="video-image">
              <img :src="videoList[0].fileImage" alt="" />
            </div>
            <div class="video-btn" @click="playVideo(videoList[0])">
              <img src="./img/video-play.png" alt="" />
            </div>
          </div>
        </div>
        <div class="note-to" @click="handleScrollToNote">业务说明</div>
        <div class="download" @click="handleDownload">
          <img src="./img/download.png" alt="" />
        </div>
        <div class="back" @click="handleReturn">
          <img src="./img/back.png" alt="" />
        </div>
      </div>
      <div class="bg">
        <img src="./img/bg2.png" alt="" />
        <div class="btn1" @click="goToPage2Tab1">
          <img src="./img/btn1.png" alt="" />
        </div>
        <div class="btn2" @click="goToPage2Tab2">
          <img src="./img/btn1.png" alt="" />
        </div>
        <div class="input-position">
          <div class="input-box">
            <input
              class="input-phone"
              type="text"
              v-model="mobile"
              placeholder="请输入移动手机号码"
            />
          </div>
          <div class="submit-box" @click="submit">
            <img src="./img/submit.png" alt="" />
          </div>
          <div class="tips">
            <div class="tips-checkbox" :class="{ checked: checked }">
              <input type="checkbox" v-model="checked" id="checked" />
              <!-- <div class="tips-checkbox-hint">已选中</div> -->
            </div>
            <span class="tips-text">知悉业务说明并用该手机号登录办理</span>
          </div>
        </div>
      </div>
      <div class="note" id="note">
        <img src="./img/note.png" alt="" class="note-img" />
      </div>
      <div class="phone">
        <img src="./img/phone.png" alt="" class="phone-img"  @click="callPhone"/>
      </div>
      <div class="video-bg">
        <img src="./img/video-bg.png" alt="" />
        <div class="video-content">
          <div class="video-list">
            <div class="video-item" v-for="item in videoList">
              <div class="video-box">
                <div class="video-cover">
                  <img :src="item.fileImage" alt="" />
                </div>
                <div class="video-play" @click="playVideo(item)">
                  <img src="./img/video-play.png" alt="" />
                </div>
              </div>
              <div class="video-set" @click="setVideo(item)">
                <img src="./img/video-set.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="audio-bg">
        <img src="./img/audio-bg.png" alt="" />
        <div class="audio-content">
          <div class="audio-list">
            <div class="audio-item" v-for="(item, index) in audioList">
              <div class="music-number">{{ index + 1 }}</div>
              <div class="audio-text">
                <div class="audio-name">{{item.musicName}}</div>
                <div class="audio-author">{{item.musicSinger}}</div>
              </div>
              <div
                v-if="currentAudioIndex !== index"
                class="audio-play"
                @click="playAudio(item,index)"
              >
                <img src="./img/audio-play.png" alt="播放" />
              </div>
              <div v-else class="audio-play" @click="closeAudio()">
                <img src="./img/audio-close.png" alt="关闭" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Toast消息显示 -->
      <div v-if="showToast" class="toast-message" :class="'toast-' + toastType">
        {{ toastMessage }}
      </div>

      <!-- 确认弹窗 -->
      <div class="confirm-modal" :class="{ show: showConfirmModal }">
        <div class="confirm-overlay" @click="cancelAgreement"></div>
        <div class="confirm-body">
          <div class="confirm-content">
            <div class="confirm-header">
              <h3>温馨提示</h3>
            </div>
            <div class="confirm-message">
              <p>点击同意，视为您已阅读并同意《业务说明》</p>
            </div>
            <div class="confirm-buttons">
              <button class="confirm-btn cancel-btn" @click="cancelAgreement">取消</button>
              <button class="confirm-btn confirm-btn-primary" @click="confirmAgreement">同意</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 登录弹窗 -->
      <div class="login-modal" :class="{ show: showLoginModal }">
        <div class="login-overlay" @click="closeLoginModal"></div>
        <div class="login-body">
          <div class="login-content" @click.stop>
            <div class="login-header">
              <div class="login-close" @click="closeLoginModal">
                <img src="img/page2/login-close.png" alt="关闭" />
              </div>
            </div>

            <div class="login-form">
              <div class="input-group">
                <input
                  type="tel"
                  v-model="loginForm.phone"
                  placeholder="请输入移动手机号"
                  class="phone-input"
                />
              </div>
              <div class="input-group">
                <input
                  type="text"
                  v-model="loginForm.code"
                  placeholder="验证码"
                  class="code-input"
                />
                <button
                  class="get-code-btn"
                  :disabled="codeButtonDisabled"
                  @click="sendCode"
                >
                  {{ codeButtonText }}
                </button>
              </div>
            </div>
            <button class="login-btn" @click="checkCode">立即登录</button>
            <!-- <div class="agreement">
              <input
                type="checkbox"
                id="agreeCheckbox"
                v-model="agreeTerms"
                class="agreement-checkbox"
              />
              <label for="agreeCheckbox">
                我已阅读并同意《<a href="#">咪咕音乐白金会员服务协议</a>》和《<a
                  href="#"
                  >隐私政策</a
                >》
              </label>
            </div> -->
          </div>
        </div>
      </div>

      <!-- 购买成功弹窗 -->
      <div class="success-modal" v-if="buySuccess">
        <div class="success-overlay" @click="closeBuySuccess"></div>
        <div class="success-body">
          <div class="success-content">
            <div class="success-buttons">
                <div class="success-btn" @click="goToPage2Tab2">
                <img src="./img/audio-to.png" alt="" />
              </div>
              <div class="success-btn" @click="goToPage2Tab1">
                <img src="./img/video-to.png" alt="" />
              </div>
            
              <div class="success-phone" @click="callPhone">
                <img src="./img/400.png" alt="" />
              </div>
            </div>
          </div>
          <!-- <div class="success-close" @click="closeBuySuccess">
            <img src="./img/close.png" alt="" />
          </div> -->
        </div>
      </div>

      <!-- 视频播放弹窗 -->
      <div class="video-modal" v-show="showVideoModal" @click="closeVideoModal">
        <div class="video-modal-content" @click.stop>
          <!-- <div class="video-modal-header">
            <div class="video-back-btn" @click="closeVideoModal">
              <img src="./img/arrow-left.png" alt="返回" />
            </div>
          </div> -->
          <div class="video-modal-body">
            <div class="video-player" v-show="currentVideo">
              <video
                :src="currentVideo.filePath"
                :poster="currentVideo.fileImage"
                class="video-element"
                loop
                ref="videoElement"
                autoplay
                webkit-playsinline='true'  
                playsinline='true'
              ></video>
            </div>
            <div
              class="video-background"
              ref="videoMark"
              @click="closeVideoModal"
            >
              <img src="./img/videoBg.png" alt="" class="video-bg-image" />
              <img src="./img/call.png" alt="" class="video-call-image" />
            </div>
            <!-- <div class="video-set-btn" @click="setVideo">
              <img src="./img/set.png" alt="设置" />
            </div> -->
          </div>
        </div>
      </div>

      
    </div>
  </body>
  <script type="text/javascript" src="./js/index.js"></script>
</html>
